<template>
	<div>
		<el-row class="row_top">
			<table class="table_top">
				<tr>
					<td> <img src="./img/com-1.png" /> </td>
					<td> <img src="./img/com-2.png" /> </td>
					<td> <img src="./img/com-3.png" /> </td>
					<td> <img src="./img/com-4.png" /> </td>
					<td> <img src="./img/com-6.png" /> </td>
					<td> <img src="./img/com-8.png" /> </td>
					<td> <img src="./img/com-9.png" /> </td>
					<td> <img src="./img/com-10.png" /> </td>
					<td> <img src="./img/com-11.png" /> </td>
					<td> <img src="./img/com-12.png" /> </td>
				</tr>
				<tr>
					<td>MacBook</td>
					<td>MacBook Air</td>
					<td>MacBook Pro</td>
					<td>iMac</td>
					<td>iMac Pro</td>
					<td>Mac Pro</td>
					<td>Mac mini</td>
					<td>配件</td>
					<td>Mojave</td>
					<td>机型比较</td>
				</tr>
			</table>
		</el-row>
		
		<el-row class="row_img1">
			<span>iMac</span> <br />
			<label>外形过人，实力过分。</label> <br />
			<a>进一步了解 ></a>  <a> 机型和价格 ></a> <br />
			<span class="span_gray">发售日期稍后更新</span> <br/>
			<img src="./img/2-1.jpg" />
		</el-row>
		
		<el-row class="row_img1">
			<span>MacBook Air</span> <br />
			<label>轻轻地，再次倾心。</label> <br />
			<a>进一步了解 ></a>  <a> 购买 ></a> <br />
			<img src="./img/2-2.jpg" />
		</el-row>
		
		<el-row class="row_img1 row_black">
			<span>MacBook Pro</span> <br />
			<label>轻轻地，</label> <br />
			<label>再次倾心。</label> <br />
			<a>进一步了解 ></a>  <a> 购买 ></a> <br />
			<img src="./img/2-3.jpg" />
		</el-row>
		
		<el-row class="row_img_two">
			
				<div class="div_img_left">
					<div class="div_text">
						<span>Mac mini</span> <br />
						<label>全身大改造</label> <br />
						<a>进一步了解 ></a>  <a> 购买 ></a> <br />
					</div>
					<img src="./img/2-4.jpg" />
				</div>
			
				<div class="div_img_right">
					<div class="div_text">
						<span>iMac Pro</span> <br />
						<label>强大，大有专业风范</label> <br />
						<a>进一步了解 ></a>  <a> 购买 ></a> <br />
					</div>
					<img src="./img/2-5.jpg" class="img_mTop"/>
				</div>
						
		</el-row>
		
		<el-row class="row_img1 row_img2">
			
			<label>Mac机型比较。</label> <br />
			<a> 找到适合你的Mac ></a> <br />
			<img src="./img/2-6.jpg" />
		</el-row>
		
		<el-row>
		<div class="div_allText">
			<label>把你手里现有的电脑，</label> <br />
			<label>变成心里想要的Mac。</label> <br />
			
			<span>用你符合条件的电脑来以旧换新，获得最高达 RMB 6730 的折抵优惠，或者免费</span>
		<br/>
		<span>进行回收处理。这既有益于你，也有益于地球。</span> <br />
		<a>进一步了解 ></a>
		</div> </el-row>
		
		<el-row class="rol_iconAndText">
			<el-col span="6" :offset="3">
				<div>
					<img src="./img/icon-1.png" /> <br />
					<label>分期付款</label> <br />
					<span>符合条件的信用卡用户可选择</span> <br />
					<span>灵活的分期付款方式。</span> <br />
					<a>进一步了解 ></a>
				</div>
				
			</el-col>
			<el-col span="6" :offset="5">
				<div>
					<img src="./img/icon-2.png" /> <br />
					<label>免费送货</label> <br />
					<span>享受免费送货上门</span> <br />
					
					<a>进一步了解 ></a>
				</div>
			</el-col>
		</el-row>
		
		<el-row>
		<div class="div_imgbg_1">
			<div>
				<label>Mac配件</label> <br />
				<a>立即选购 ></a>
			</div>
		</div>
		</el-row>
		
		<el-row>
		<center> <p class="p_title">为什么 Mac 就是那么不一样？</p> </center>
		</el-row>
		
		<el-row>
		<div class="div_imgbg_2">
			<div>
				<span class="span_midTex"> macOS Mojave </span> <br />
				<label>因强大而简单</label> <br />
				<span>为你带来深色模式、受专业用户启发的各种新功能、三款新 </span> <br />
				<span>app，以及重新设计的 Mac App Store。</span> <br />
						
				<a>进一步了解 ></a> <a>立即升级 ></a>
			</div>
		</div></el-row>
		
		
		<el-row>
			<el-col span="12">
				<div class="div_img_left2">
					<div>
						<label>macOS</label> <br />
						<span class="theSpan">Mac 如此强大好用，macOS 这一操作系统功不可没。它为
						 Mac 特别打造，采用了软硬件协同设计，能帮助你得心应手地
						 处理各种事情。</span> <br />
						 <a>进一步了解 ></a>
					</div>
				</div>
			</el-col>
			
			<el-col span="12">
				<div class="div_img_right2">
					<div>
						<label>iCloud</label> <br />
						<span class="theSpan">iCloud 可以安全存储你的照片、视频、文稿、信息、音乐、app 
						等内容，并能在你的各种设备上同步保持更新**。因此，你可以更
						自由、更方便地访问你想要的内容。</span> <br />
						 <a>进一步了解 ></a>
					</div>
				</div>
			</el-col>
		</el-row>
		
		<!-- 内置App -->
		<el-row>
		<div class="div_app">
			<label>内置App</label> <br />
			<span class="theSpan">每台 Mac 都内置了众多激发创意、
			提升效率的 app，帮助你去探索、交流、高效工作。</span> <br />
			
			<center>
			<table>
				<tr>
					<td> <img src="./img/icon-3.jpg" /> <br/> 
					<span class="theSpan">照片</span> </td>
					
					<td> <img src="./img/icon-4.jpg" /> <br/> 
					<span class="theSpan">iMovie剪辑</span> </td>
					
					<td> <img src="./img/icon-5.jpg" /> <br/> 
					<span class="theSpan">库乐队</span> </td>
					
					<td> <img src="./img/icon-6.jpg" /> <br/> 
					<span class="theSpan">Pages文稿</span> </td>
					
					<td> <img src="./img/icon-7.jpg" /> <br/> 
					<span class="theSpan">表格</span> </td>
					
					<td> <img src="./img/icon-8.jpg" /> <br/> 
					<span class="theSpan">讲演</span> </td>
					
					<td> <img src="./img/icon-9.jpg" /> <br/> 
					<span class="theSpan">浏览器</span> </td>
				</tr>
			</table></center>
			
			<span class="theSpan">能让你日益庞大的照片图库变得井井有条，
			并易于查看。还能帮助你美化图像，创作精彩照片。更有 iCloud </span> <br />
			<span>照片，让你可以将值得长久珍藏的照片和视频保存在云端**。</span> <br />
			 <a>进一步了解 ></a> <br />
			 <img src="./img/and1.png" />
		</div></el-row>
		
		<el-row>
		<div class="div_app">
			<label>专业App</label> <br />
			<span class="theSpan">对于想要尽情发挥创意的专业人士而言，这里有众多为业界所推崇的 app，</span><br/>
			<span>可以用来更好地掌控音乐与影片的剪辑、处理和输出。</span> <br />
			
			<center>
			<table>
				<tr>
					<td> <img src="./img/icon-10.jpg" /> <br/> 
					<span class="theSpan">Final Cut Pro X</span> </td>
					
					<td> <img src="./img/icon-11.jpg" /> <br/> 
					<span class="theSpan">Lodic Pro X</span> </td>
					
					<td> <img src="./img/icon-12.jpg" /> <br/> 
					<span class="theSpan">Motion</span> </td>
					
					<td> <img src="./img/icon-13.jpg" /> <br/> 
					<span class="theSpan">Compressor</span> </td>
					
					<td> <img src="./img/icon-14.jpg" /> <br/> 
					<span class="theSpan">MainStage3</span> </td>
				</tr>
			</table></center>
			
			<span class="theSpan">为了满足如今剪辑师们四溢的灵感，Final Cut Pro 
			提供开创性的视频剪辑功能、强大的媒体组织整理能力 </span> <br />
			<span>和杰出的性能，并针对 Mac 电脑和 macOS Mojave 进行了全面优化。</span> <br />
			 <a>进一步了解Final Cut Pro X ></a> <br />
			 <img src="./img/and2.png" />
			 
			 <div>
				 <img src="./img/icon-15.png" />
				 <span class="theSpan">全新的 Mac App Store 带来焕然一新的界面、
				 精心编辑的丰富内容，以及更多的 Mac 版精彩 app。</span>
				  <a>探索Mac App Store > </a>
			 </div>
		</div></el-row>
		
		<el-row>
		<center> <p class="p_title">尽享 Mac 的精彩</p> </center>
		</el-row>
			
		<el-row>
			<el-col span="12">
				<div class="div_left3">
					<div>
						<label class="label_white"> Mac教育应用</label> <br />
						<span class="theSpan_white"> 让各种潜能，在课堂上尽情释放</span><br />
						<a>了解Mac教育应用 > </a> <br />
						<a>了解适用于教育机构的优惠价格  > </a>
					</div>
				</div>
			</el-col>
			
			<el-col span="12">
				<div class="div_right3">
					<div>
						<label class="label_white"> Mac高等教育应用</label> <br />
						<span class="theSpan_white"> 为大学生活的方方面面做好准备</span><br />
						<a>了解Mac高等教育应用 > </a> <br />
						<a>以Apple教育优惠价格选购  > </a>
					</div>
				</div>
			</el-col>
		</el-row>
		
		<el-row>
		<div class="div_imglast">
			<div>
				<label class="label_white"> Mac商务应用</label> <br />
				<span class="theSpan_white">以强大的装备，让你的商务事业更上一层楼。</span><br />
				<a>了解Mac商务应用 > </a> <br />
				<a>商务选购  > </a>
			</div>
		</div>
		</el-row>
		
		<theButton></theButton>
	</div>
</template>

<script>
	import theButton from '@/views/Homework/Apple/theButton.vue'
	export default{
		data(){
			return{
				
			}
		},components:{
			theButton
		}
	}
</script>

<style scoped>
	
	.row_top{
		text-align: center;
		margin-top: 88px;
		background: #f6f6f6;
		padding-top: 20px;
		padding-bottom: 20px;
	}
	
	/* 顶部的电脑的图标一栏 */
	.table_top{
		margin: auto;
		font-size: 12px;
		color: #333;
	}
	.table_top td{
		padding: 0 10px;
	}
	.table_top img{
		width: 75%;
	}
	
	/* 图文 */
	.row_img1{
		background:#fafafa;
		text-align: center;
		padding-top: 50px;
		padding-bottom: 30px;
		margin-bottom: 30px;
	}
	.row_img1 span{
		margin-right: 20px;
		color: #111;
		font-size: 32px;
	}
	.row_img1 label{
		color: #111;
		font-size: 64px;
		font-weight: 600;
		line-height: 88px;
	}
	.row_img1 a,.row_img_two a,.div_imgbg_1 a{
		color: #0070c9;
		font-size: 24px;
		line-height: 60px;
	}
	.row_img1 a:hover,.row_img_two a:hover,.div_allText a:hover,.rol_iconAndText a:hover
	.div_imgbg_1 a:hover,.div_imgbg_2 a:hover,.div_img_left2 a:hover,.div_img_right2 a:hover,
	.div_app a:hover,.div_right3 a:hover,.div_left3 a:hover,.div_imglast a:hover{
		text-decoration: underline;
	}
	.row_img1 .span_gray{
		color: #a2a2a2;
		font-size: 22px;
	}
	.row_img1 img{
		margin-top: 40px;
	}
	
	.row_black{
		background:#131218;
	}
	.row_black span,.row_black label{
		color: white;
	}
	
	/* 两个图片在一行的 */
	.row_img_two img{
		width: 100%;
		height:100%;
		margin-top: 88px;
	}
	.row_img_two>div{
		width:650px;
		height: 500px;
		position: relative;
		background: #000000;
	}
	
	.div_img_left{
		float: left;
		margin-left: 70px;
	}
	
	.div_img_right{
		float: right;
		margin-right: 70px;
	}
	
	.row_img_two span{
		color: white;
		font-size: 32px;
	}
	.row_img_two label{
		color: white;
		font-size: 22px;
		line-height: 50px;
	}

	.div_text{
		text-align: center;
		position: absolute;
		top: 40px;
		left: 200px;
	}
	
	.row_img2 label,.div_allText label,.div_imgbg_1 label,.div_img_left2 label,
	.div_img_right2 label,.div_app label{
		font-size: 45px;
		font-weight: 600;
		font-family: "黑体";
	}
	
	.div_allText{
		margin: 0 60px;
		padding-bottom: 207px;
		padding-top: 210px;
		background: #fafafa;
		text-align: center;
		color: #111;
		font-size: 18px;
	}
	
	.div_allText span{
		line-height: 40px;
	}
	.div_allText a,.rol_iconAndText a{
		color: #0070c9;
		line-height: 40px;
	}
	
	.rol_iconAndText div{
		text-align: center;
		color: #333;
		font-size: 19px;
		height: 165px;
		margin-bottom: 90px;
		padding-top: 20px;
	}
	
	.rol_iconAndText label{
		font-size: 21px;
		font-weight: bold;
		line-height: 45px;
	}
	
	.div_imgbg_1,.div_imgbg_2{
		background: url(img/2-7.jpg);
		background-size: cover;
		margin: 10px 60px 10px 60px;
		height: 610px;
		text-align: center;
		position: relative;
	}
	.div_imgbg_1 div{
		position: absolute;
		top: 45px;
		left: 635px;
		
	}
	.div_imgbg_1 a,.div_imgbg_2 a{
		font-size: 19px;
		color: #0070c9;
		line-height: 40px;
	}
	
	.p_title{
		font-size: 62px;
		font-weight: 600;
		font-family: "黑体";
		color: #111;
	}
	
	.div_imgbg_2{
		background: url(img/2-8.jpg);
		margin-bottom: 40px;
	}
	.div_imgbg_2 div{
		position: absolute;
		top: 190px;
		left: 460px;
		color: white;
		font-size: 20px;
	}
	
	.div_imgbg_2 .span_midTex{
		font-size: 23px;
		font-weight: 500;
	}
	
	.div_imgbg_2 label{
		font-size: 37px;
		font-weight: 600;
		font-family: "黑体";
		line-height: 60px;
	}
	
	.div_img_left2{
		height: 700px;
		background: url(img/2-9.jpg);
		background-size: cover;
		margin-left: 70px;
		margin-right: 20px;
		position: relative;
	}
	
	.div_img_left2 div,.div_img_right2 div{
		width: 411px;
		text-align: center;
		position: absolute;
		top: 50px;
		left: 120px;
	}
	.theSpan{
		font-size: 15px;
		color: #333;
		line-height: 35Apx;
	}
	.div_img_left2 a,.div_img_right2 a,.div_app a,.div_right3 a,
	.div_left3 a,.div_imglast a{
		color:  #6bf;
		line-height: 40px;
		font-size: 17px;
	}
	
	.div_img_right2{
		height: 700px;
		background: url(img/2-10.jpg);
		background-size: cover;
		margin-left: 20px;
		margin-right: 70px;
		position: relative;
	}
	
	/* 内置App */
	.div_app{
		margin-left: 70px;
		margin-right: 70px;
		text-align: center;
		background: #fafafa;
		padding-bottom: 20px;
		margin-top: 30px;
		padding-top: 70px;
	}
	.div_app table{
		margin-top: 30px;
		margin-bottom: 40px;
		padding-bottom: 10px;
		border-bottom: 1px solid #999;
	}
	.div_app table td{
		width: 130px;
		height: 50px;
	}
	.div_app>img{
		width: 80%;
		margin-bottom: 20px;
	}
	
	.div_app div{
		width: 630px;
		border-top: 1px solid #ccc;
		padding-top: 70px;
		margin: auto;
		text-align: left;
		position: relative;
		padding-left: 90px;
		margin-bottom: 40px;
	}
	.div_app div img{
		position: absolute;
		top: 60px;
		left: 10px;
	}
	
	.div_left3{
		background: url(img/2-15.jpg);
		height: 635px;
		width: 655px;
		margin-left: 70px;
		margin-right: 20px;
		position: relative;
		text-align: center;
	}
	
	.div_right3{
		background: url(img/2-16.jpg);
		height: 635px;
		width: 655px;
		margin-left: 20px;
		margin-right: 70px;
		position: relative;
		text-align: center;
	}
	
	.div_left3 div,.div_right3 div{
		width: 373px;
		position: absolute;
		top: 220px;
		left: 150px;
	}
	
	.label_white{
		font-size: 45px;
		color: white;
		font-weight: 600;
		font-family: "黑体";
	}
	.theSpan_white{
		font-size: 18px;
		color: white;
		line-height: 35Apx;
	}
	
	.div_imglast{
		margin-top: 50px;
		margin-left: 70px;
		margin-right: 70px;
		height: 610px;
		background: url(img/2-17.jpg);
		position: relative;
	}
	.div_imglast div{
		position: absolute;
		top: 220px;
		left: 521px;
		text-align: center;
	}
</style>
